<template>
  <div class="spu">
    <!-- -->
    <search @getValue="getSonValue" @mysearch="mysearch"></search>
    <div class="center">
      <div class="choose">
        <div class="top">
          <div class="line_box">
            <span class="line_box_left">技术领域：</span>
            <div class="line_box_right line_wrap">
              <span
                v-for="(item, index) in typelist"
                @click="changetype(index, item)"
                :class="current == index ? 'isActiv' : ''"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <el-row>
        <el-col :span="18" style="position: relative">
          <Sorts />
          <div class="cenong-left-conent">
            <ul class="clc-ui">
              <li
                @click="changeitem(item.id)"
                v-show="item.state != '待审核'"
                v-for="(item, index) in teacherlist"
              >
                <div>
                  <div class="clc-lia">
                    <div class="clcig">
                      <img src="../../assets/touxiang-m.png" alt="" />
                    </div>
                    <div class="clc-lia-name">
                      <div>
                        <b> {{ item.name }} </b>
                      </div>
                      <div class="clncol">
                        {{ item.post }}
                      </div>
                      <div class="gang"></div>
                    </div>
                  </div>
                  <div>
                    <div class="Adminis">
                      {{ item.enterprise }}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-if="teacherlist == ''" style="height: 400px">
            <el-empty class="emptybox" description="暂无数据~" />
          </div>

          <div class="pagniation">
            <el-pagination
              v-model:current-page="currentPage3"
              v-model:page-size="pageSize3"
              layout="prev, pager, next"
              background
              :total="Number(total)"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <HotBox />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import search from "../acl/search.vue";
import { useRouter } from "vue-router";
import { getteacher } from "@/api/user/index";
import Sorts from "../../components/sorts.vue";
import HotBox from "../../components/hotBox2.vue";
const router = useRouter();
const keyword = ref("");
const typelist = [
  "全部",
  "现代农业",
  "粮食经济作物",
  "森林资源",
  "动物生产",
  "动物医学",
  "生态环境",
  "农机装备类",
  "食品产业技术",
  "化学与化学工程技术",
  "新一代信息技术",
  "生物医药",
  "新型材料",
];
const getSonValue = (e) => {
  console.log(e); //子组件传入的值
  keyword.value = e;
};
const mysearch = () => {
  getteacherlist();
};
const total = ref(0);
const { proxy } = getCurrentInstance() as any;
const teacherlist: any = ref([]);

const value = ref("");
const changetype = (index, item) => {
  current.value = index;
  value.value = item;
  getteacherlist();
};

const currentPage3 = ref(1);
const pageSize3 = ref(6);
function getteacherlist() {
  proxy
    .$get("/user/list/teacher", {
      current: currentPage3.value,
      limit: 6,
      field: value.value == "全部" ? "" : value.value,
      keyword: keyword.value,
    })
    .then((res: any) => {
      teacherlist.value = res.data.records;
      total.value = res.data.total;
    });
}

getteacherlist();

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  currentPage3.value = val;
  getteacherlist();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage3.value = val;
  getteacherlist();
};

const current = ref(0);
const itemcurrent = ref(0);
const changeitem = (index) => {
  itemcurrent.value = index;
  router.push({
    path: "/product/peopledetail",
    query: {
      id: index,
    },
  });
};
</script>
<style lang="scss" scoped>
.spu {
  .center {
    transform: translateY(-82px);
    width: 1400px;
    margin: 0 auto;
  }

  .choose {
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    opacity: 1;
    padding: 33px 26px;
    .top {
      .line_box {
        margin-bottom: 20px;
        display: flex;
        align-items: baseline;
        span {
          white-space: nowrap;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
          opacity: 1;
          padding: 6px 18px;
          text-align: left;
        }

        .spwidth {
          width: 914px !important;
        }
        .line_wrap {
          height: auto !important;
        }

        .line_box_left {
          min-width: 110px;
          text-align: left;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          color: #4a4a4a;
          opacity: 1;
        }
        .line_box_right {
          display: flex;
          flex-wrap: wrap;
          width: 1040px;
          height: 40px;
          overflow: hidden;
          flex: 1;
          span {
            white-space: nowrap;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666;
            opacity: 1;
            padding: 8px 15px;
            text-align: left;
            cursor: pointer;
          }

          .el-input__inner {
            padding-right: 30px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 100%;
          }
          .el-input__inner::-moz-placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__inner::placeholder {
            font-size: 16px;
            line-height: 100%;
          }
          .el-input__suffix {
            right: 5px;
          }
          .el-input__suffix .el-input__icon {
            height: 100%;
            width: 25px;
            text-align: center;
            transition: all 0.3s;
            line-height: 40px;
          }
        }
      }
    }
    .botm {
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666;
        opacity: 1;
        cursor: pointer;
        img {
          width: 7px;
          height: 12px;
          transform: rotate(-90deg);
        }
      }
    }
  }
  .cenong-left-conent {
    margin-top: 20px;
    overflow: hidden;
    padding-top: 20px;
  }

  .clc-ui {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 4px;
    margin-right: 4px;
  }

  .clc-ui:after {
    content: "";
    width: 331px;
  }

  .clc-ui li {
    padding: 16px;
    width: 331px;
    float: left;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    min-height: 342px;
    margin-bottom: 29px;
    cursor: pointer;
  }

  .clc-ui li:hover {
    box-sizing: border-box;
    border: 1px solid #2769dc;
  }

  .clc-lia {
    position: relative;
    height: 160px;
    overflow: hidden;
    margin-bottom: 25px;
  }

  .clcig {
    position: absolute;
    top: 8px;
    right: 1px;
    z-index: 9;
    width: 155px;
    height: 155px;
    background: #fff;
    border-radius: 50%;
  }

  .clc-lia img {
    z-index: 99;
    width: 150px;
    height: 150px;
    margin: 2px auto 0;
  }

  .clc-lia-name {
    width: 224px;
    height: 110px;
    background: #f7f7f7;
    margin-top: 32px;
    text-align: left;
    padding: 30px 20px;
    box-sizing: border-box;
    position: relative;
  }

  .gang {
    width: 8px;
    height: 34px;
    position: absolute;
    top: 30px;
    left: -3px;
    background: #0561d2;
  }

  .clc-lia-name div b {
    display: block;
    font-size: 20px;
    width: 112px;
    height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .Adminis {
    font-size: 22px;
    display: block;
    color: #666;
  }

  #elcol {
    padding-right: 0.625rem !important;
  }

  #elco {
    max-width: 228px !important;
  }

  .clncol {
    color: #999;
    font-size: 20px;
    margin-right: 42px;
  }

  .xiaoelse {
    text-align: center;
    display: block;
    margin: 0 auto;
  }

  .xiaoelse img {
    width: 20%;
  }

  .xiaoelse p {
    margin-top: 20px;
    color: #ccc;
    text-align: center;
  }

  .xinging {
    min-width: 20px;
    margin-top: 5px;
  }

  .xinging span {
    display: inline-block;
    height: 15px;
    line-height: 12px;
    margin-top: 9px;
    color: #999;
  }
  .isActiv {
    cursor: pointer;
    background: #2769dc;
    opacity: 1;
    color: #fff !important;
    border-radius: 5px;
    line-height: 25px;
    padding: 5px 15px !important;
    height: 25px;
    box-sizing: content-box;
  }
  .content {
    box-sizing: border-box;
    position: relative;

    .newbox {
      width: 1400px;
      display: flex;
      align-items: start;
      font-size: 14px;

      .selectbox {
        width: 1080px;

        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .selectboxitem {
          border-radius: 5px;
          padding: 8px 30px;
          border: 1px solid #999;
          margin: 0 20px 10px;
        }

        .active {
          margin: 0 20px 10px;
          border-radius: 5px;
          padding: 9px 30px;
          color: #fff;
          background-color: rgb(12, 160, 250);
        }
      }
    }

    .pagniation {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .maincontent {
      width: 1400px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 20px;
      // display: flex;
      // align-items: center;
      // flex-wrap: wrap;
      // justify-content: space-between;

      .contentitem {
        padding: 20px;
        margin: 20px 0;
        background: url("../../assets/首页/technology.png");
        width: 100%;
        background-size: 100% 100%;
        display: flex;
      }

      .contentitem:hover {
        box-shadow: 1px 1px 5px 1px $text-color;
      }

      img {
        width: 100px;
        height: 130px;
      }

      .active {
        box-shadow: 1px 1px 5px 1px $text-color;
      }

      .contentitem_text {
        font-size: 16px;

        .level {
          color: #999;
        }
      }
    }
  }
}
</style>
